<template>
  <div>
    <div class="nav">
      <div class="nav w1200 nav-box" style="width: 1200px !important;">
        <div class="nav-top">
          <div class="nav-top-img">
            <a class="cur">
              <div class="h1-img">
                <img src="../../assets/images/logo.png" class="img">
              </div>
            </a>
          </div>
          <div class="nav-list">
            <ul>
              <li class="cur" @mouseenter="enter(item.articleType)" @mouseleave="out" @click="textListJump(item)" v-for="(item,index) in navlists" :key="index" :class="articleType== item.articleType?'li_hover':' '">
                <a>{{item.name}}</a>
              </li>
            </ul>
          </div>
          <div class="nav-login">
            <!-- <a class="cur">登陆</a> -->
          </div>
        </div>
      </div>
    </div>
    <div class="banner-img" style="margin-top:65px; width: 100%;">
      <el-carousel trigger="click" width='650px' height="380px">
        <el-carousel-item v-for="(item,index) in topLinks" :key="item.imgId">
          <a target="_blank" @click="jumpUrl(item.webUrl)" class="cur" style="display: block" :title="item.imgIntroduction">
            <img :src="item.imgUrl" style="width:100% ;height: 380px">
          </a>
        </el-carousel-item>
      </el-carousel>
      <!-- <img src="../../assets/images/banner1.jpg" class="img"> -->
    </div>
  </div>
</template>

<script>
  import {bus} from '../../bus'
  import API from '../../api/content'
  export default {
    data() {
      return {
        navlists:'',
        bcg:0,
        articleType:'',
        topLinks:''
      }
    },
    created() {
      this.navlist()
      this.returnArticleType()
      this.out()
    },
    computed:{
      change(){
        this.out()
        return this.$store.state.urlchange
      },
      // changeUrl(){
      //   this.out()
      //   return window.location.href
      // }
    },
    watch:{
      change:{
        handler(nv,ov){
        },
        deep:true,
        immediate:true
      },
    },
    methods:{
      jumpUrl(webUrl) {
        if(webUrl) {
         window.open(webUrl, '_blank');
        }
      },
      returnArticleType(){
        this.articleType = this.$route.query.articleType
      },
      enter(e) {
        this.bcg = e
        this.articleType = e
      },
      out() {
        this.menu = ''
        this.articleType = this.$route.query.articleType || null
      },
      navlist() {
        API.navlist().then(res=>{
          this.navlists = res.data.navigationList
          this.topLinks = res.data.topImgList
        })
      },
      //导航栏跳转
      textListJump(item) {
      let path = this.returnNav(item.articleType)
          this.$router.push({
            path:`${path}`,query:{articleType:item.articleType}
          })
      },
      returnNav(articleType){
        let obj={
            1:'/declare',
            2:'/competition',
            3:'/match',
            4:'/forum',
            5:'/innovate',
            6:'/afrat',
        }
        return obj[articleType] || '/'
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/css/common.css";
  .nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    margin: 0 auto;
    height: 70px;
    width: 100%;
    z-index: 10000;

    
    // line-height: 70px;
    // background-color: red;
  
    .nav-top {
      height: 70px;
      line-height: 70px;
      float: left;
      .nav-top-img {
        height: 100%;
        float: left;
        a {
          display: inline-block;
          .h1-img {
            width: 280px;
            padding: 10px 0;
            box-sizing: border-box;
            height: 70px;
            line-height: 50px;
            
            img {
              max-width: 100%;
              vertical-align: middle;
            }
          }
        }
      }
      .nav-list {
        width: 620px;
        overflow: hidden;
        padding-left: 185px;
        ul{
          li {
            font-size: 16px;
            width: 85px;
            text-align: center;
            float: left;
          }
          .li_hover {
            background-color: #3246c4;
            color: #ffffff;
          }
        }
      }
      .nav-login {
        border-left: 1px solid #dddddd;
        a {
          padding: 7px 30px;
          border: 1px solid #3246c4;
          border-radius: 7px;
          margin-left: 20px;
        }
      }
    }
  }
</style>